<script type="text/javascript">
$ = jQuery.noConflict();
    $(function(){

        var userScreenHeight = $(document.body).outerHeight()/2-200;
        $('#myModal').modal().css('margin-top',userScreenHeight+'px');

        $('#myModal').on('shown.bs.modal',function(e){
           var backdrop = $(document.body).find('.modal-backdrop');
            if(backdrop.length > 1)
            {
                backdrop.remove()-1;
            }

        });
    });
            $('#myModal button').click(function(e){
               $('input#MenuItem_type').blur();
                return true;
            });
    $('#selectMaterial button').click(function(e){
        $('input#MenuItem_material').blur();
        return true;
    });

            $('.list-group a').click(function(e){
                var thisId,selectMaterial,selectCategory,title,linkPath,type,link,hideCategory,hideMaterial;
                 thisId = $(this).attr('id');
                 selectMaterial = $('#selectMaterialElement');
                 selectCategory = $('#selectCategoryElement');
                 title = $('#MenuItem_title').parent();
                 type = $('#MenuItem_type').parent();
                 linkPath =  $('input#MenuItem_link_path');
                 link = $('#link');

                 hideCategory = function(){
                     if(selectCategory.css('display') === 'block')
                     {
                         selectCategory.css('display','none');
                     }
                     return true;
                 };
                hideMaterial = function(){
                    if(selectMaterial.css('display') === 'block')
                    {
                        selectMaterial.css('display','none');
                    }
                    return true;
                };

                $('#myModal').modal('hide');
                switch(thisId)
                {
                    case "single-article":
                        selectMaterial.show();
                        hideCategory();
                        break;
                    case "list-all-categories":
                        hideCategory();
                        hideMaterial();
                        link.val('allcategories');
                        break;
                    case "category-list":
                        selectMaterial.hide();
                        selectCategory.show();
                        break;
                    case "list-all-articles":
                        hideCategory();
                        hideMaterial();
                        break;
                    default :
                        if(selectMaterial.attr('display') !== 'none')
                            selectMaterial.hide();
                }
                popoversDestroy(type);
                $('#typeField').val($(this).attr('id'));
                $('input#MenuItem_type').val($(this).attr('id'));
            });
    function popoversDestroy(type)
    {
        type.popover('destroy').removeClass('error').end().css('border-color','#CCCCCC');
        return true;
    }
    function popoversShow(title,linkPath)
    {
        title.popover('show');
        linkPath.popover('show');
        return true;
    }

</script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

            </div>
            <div class="modal-body">

                <div class="panel-group" id="accordion">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <i class="fa fa-list-alt"></i><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    <?php echo Yii::t('MenuModule.base','Material')?>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse collapse">
                            <div class="panel-body">
                                <div class="list-group">
                                    <a id="single-article" href="#" class="list-group-item" title="<?php echo Yii::t('MenuModule.base','Display a single article');?>"><?php echo Yii::t('MenuModule.base','Material');?><span class="text-muted sm"><?php echo Yii::t('MenuModule.base','Display a single article');?></span></a>
                                    <a id="list-all-categories" href="#" class="list-group-item" title="<?php echo Yii::t('MenuModule.base','Shows a list of all the article categories within a category.');?>"><?php echo Yii::t('MenuModule.base','List of all categories');?><span class="text-muted sm"><?php echo Yii::t('MenuModule.base','Shows a list of all the article categories within a category.');?></span></a>
                                    <a id="category-list" href="#" class="list-group-item" title="<?php echo Yii::t('MenuModule.base','Displays a list of articles in a category.');?>"><?php echo Yii::t('MenuModule.base','Displays a list of articles in a category.');?><span class="text-muted sm"><?php echo Yii::t('MenuModule.base','Displays a list of the materials in the category');?></span></a>
                                    <a id="list-all-articles" href="#" class="list-group-item" title="<?php echo Yii::t('MenuModule.base','Displays a list of all articles')?>"><?php echo Yii::t('MenuModule.base','List all articles');?><span class="text-muted sm"><?php echo Yii::t('MenuModule.base','Displays a list of all articles');?></span></a>

                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <i class="fa fa-link"></i><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                    <?php echo Yii::t('MenuModule.base','Links')?>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse">
                            <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <i class="fa fa-user"></i><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                    <?php echo Yii::t('MenuModule.base','Users manager')?>
                                </a>
                            </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse">
                            <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>&nbsp<?php echo Yii::t('MenuModule.base','Close');?></button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->